
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="format-detection" content="telephone=no" />
    #parse("/h5/common/webWords.html")
    <link rel="stylesheet" type="text/css" href="http://${staticHost}/css/stcss.css" />
    <link rel="stylesheet" type="text/css" href="http://${staticHost}/css/page.css" />
    <!--    <title>作业详情-单选</title>-->
    <script type="text/javascript" src="http://${staticHost}/js/jquery.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style type="text/css">
        body {
            background: #ffffff;
        }

        .span_title {
            width: 100%;
            display: block;
            font-size: 1.2rem;
            text-align: left;
            height: 2rem;
            line-height: 2rem;
            margin-bottom: .5rem;
            /*vertical-align: top;*/
        }

        .span_line {
            color: #666666;
            width: 100%;
            font-size: 1.2rem;
            text-align: left;
            min-height: 2rem;
            line-height: 2rem;
            margin-top: 1.5rem;
            position: relative;
        }

        .span_line img{
            width: auto;
            max-width: 90%;
            margin: .5rem;
            display: inline-block;
            vertical-align:middle;
        }
        .cut_line{
            border-bottom: 0.15rem dotted #cccccc;
        }
        .span_checkBox {
            display: inline-block;
            height: 2rem;
            position: absolute;
            top: 50%;
            margin-top:-1rem;
        }

        .span_item_hit{
            display: inline-block;
            height: 2rem;
            position: absolute;
            top: 50%;
            left: 2.5rem;
            margin-top:-1rem;
        }

        .span_item {
            display: block;
            margin-left: 4rem;
        }
        .span_item img{
            display: inline-block;
            width: auto;
            max-width: 90%;
            margin: .5rem;
            vertical-align: middle;
        }

        .span_answer {
            display: none;
            width: 80%;
            min-height: 8rem;
            margin: 0 auto;
            background: #c6c6c6;
            border-radius: .5rem;
            padding: 1rem;
        }

        .over {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #f5f5f5;
            opacity:0.5;
            z-index: 1000;
        }

        .layout {
            display: none;
            position: absolute;
            top: 40%;
            left: 40%;
            width: 20%;
            height: 20%;
            z-index: 1001;
            text-align:center;
        }
    </style>
</head>
<body>
<div id="over" class="over"></div>
<div id="layout" class="layout"><img src="http://${staticHost}/images/loading.gif" /></div>
    <section class="global_section_noBg" style="margin-top: 1rem;">
        <h3>$!hwTitleMap.hw_title</h3>
        <input type="hidden" id="hwId" value="$!hwTitleMap.id"/>
    </section>
    <section class="global_section_noBg center">
        <span class="title">作业详情</span>
        <span class="span_littleFont">已做：<label id="alreadyTest">$!alreadyCount</label>题</span>
        <span class="span_littleFont">剩余：<label id="remainTest">$!surplusCount</label>题</span>
        #if($!exceedTerm != 1)
        <span class="span_littleFont">得分：<label id="hwStore">$!hwScore</label>分</span>
        #end
        <input type="hidden" id="courseId" value="$!courseId"/>
        <input type="hidden" id="semesterId" value="$!semesterId"/>
        <input type="hidden" id="subjectNum" value="1" />
        <input type="hidden" id="hwStatus" value="$!hwStatus" />
        <input type="hidden" id="exceedTerm" value="$!exceedTerm" />
        <input type="hidden" id="testIds" value="$!testIds" />
    </section>
    #set($maxValue=1)
    #set($maxMainValue=1)
    #set($maxOptValue=1)
    #foreach($form in $!hwSubjectList)
    #if($maxMainValue == 1)
    <section class="global_section_noBg" id="subject$!maxValue">
        #else
        <section class="global_section_noBg" id="subject$!maxValue" style="display: none">
            #end
            <span class="span_title">
                    $!form.hw_no、$!form.hw_subject
                </span>
            <input type="hidden" id="hwStId$!maxValue" value="$!form.id"/>
            #set($formMain = $!form.hwMain)
            #set($hwChecked = 0)
            #set($hwAnswers = $!formMain.answerIds)
            <!-- 小题目容器 -->
            <section id="hwMain$!maxValue">
                <span class="span_line">  $!formMain.test_no,$!formMain.test_stem
                     #if(!($!formMain.test_img_url != "" && $!formMain.test_stem == ""))
                     （）
                     #end
                     #if($!formMain.test_img_url != "")
                     <img src="$!imageHost$!formMain.test_img_url"/>
                     #end
                </span>
                <input type="hidden" id="testId$!maxValue" value="$!formMain.test_id"/>
                <input type="hidden" id="testType$!maxValue" value="$!formMain.test_type"/>
                #if($hwAnswers != "")
                 <input type="hidden" id="answer$!maxValue" value="1"/>
                #else
                 <input type="hidden" id="answer$!maxValue" value="0"/>
                #end
                <section>
                    #foreach($formOption in $!formMain.hwOption)
                    #if($hwAnswers != "")
                    #set($optionChecked = ','+$!formOption.test_option_id+',')
                     #if($hwAnswers.indexOf($optionChecked) > -1)
                      #set($hwChecked = 1)
                     #else
                      #set($hwChecked = 0)
                     #end
                    #end
                    #if($!formMain.test_type == 2)
                    <!--多选-->
                    <div class="span_line">
                            <span class="span_checkBox">
                                #if($hwChecked == 1)
                                 <input type="checkbox" name="topic$!maxValue" id="item$!maxOptValue" checked="checked" value="$!formOption.test_option_id"/>
                                #else
                                 <input type="checkbox" name="topic$!maxValue" id="item$!maxOptValue"  value="$!formOption.test_option_id"/>
                                #end
                                <label for="item$!maxOptValue"></label>
                            </span>
                            <span class="span_item_hit">
                                $!formOption.test_option,
                            </span>
                            <span class="span_item">
                                 $!formOption.test_option_stem
                                 #if($!formOption.test_option_img_url != "")
                                 <img src="$!imageHost$!formOption.test_option_img_url">
                                 #end
                            </span>
                        </div>
                    #else
                    <!--单选-->
                    <div class="span_line">
                            <span class="span_checkBox">
                                #if($hwChecked == 1)
                                <input type="radio" name="topic$!maxValue" id="item$!maxOptValue" checked="checked" value="$!formOption.test_option_id"/>
                                #else
                                <input type="radio" name="topic$!maxValue" id="item$!maxOptValue" value="$!formOption.test_option_id"/>
                                #end
                                <label for="item$!maxOptValue"></label>
                            </span>
                            <span class="span_item_hit">
                                $!formOption.test_option,
                            </span>
                            <span class="span_item">
                                 $!formOption.test_option_stem
                                 #if($!formOption.test_option_img_url != "")
                                     <img src="$!imageHost$!formOption.test_option_img_url">
                                 #end
                            </span>
                        </div>
                    #end
                    #set($maxOptValue= ($!maxOptValue +1))
                    #end
                </section>
                <!-- 答案解析 -->
                <section class="global_section_noBg">
                    <span class="span_title color" onclick="answerClick(this)">答案解析</span>
                    <div class="span_answer">
                            <span class="span_line">答案：
                                <span class="color_red">
                                    #foreach($formAnswer in $!formMain.hwAnswer)
                                    $!formAnswer.test_answer
                                    #end
                                </span>
                            </span>
                        <span class="span_line">$!formMain.hwExplain.test_explain</span>
                    </div>
                </section>
            </section>
        </section>
        #set($maxValue= ($!maxValue +1))
    </section>
    #set($maxMainValue= ($!maxMainValue +1))
    #end
    <input type="hidden" value="$!remainTest" id="subjectMaxNum"/>
    <input type="hidden" value="" id="optionNumFlag"/>
    <section class="global_section_noBg" style="margin-top: 1rem;margin-bottom: 20%;">
        <input class="global-button" type="button" value="上一题" id="last_q"/>
        <input class="global-button float_right" type="button" value="下一题" id="next_q"/>
    </section>
    <section class="global_section_noBg center" style="margin-top: .5rem;margin-bottom: 15%;display: none">
        <input class="global-button btn_default" type="button" value=" 提    交 " />
    </section>


    <!-- 底部 begin -->
    <div class="fixdiv">
        <ul>
            <li><a href="/hw/auth/hwIndex"><img src="http://${staticHost}/images/foticon001.jpg"><span>返回</span></a></li>
            <li><a href="/edu/auth/modifyPwd"><img src="http://${staticHost}/images/foticon004.jpg"><span>重置密码</span></a></li>
            <li><a href="javascript:void(0)" onclick="loginOut()"><img src="http://${staticHost}/images/foticon003.jpg"><span>退出系统</span></a></li>
        </ul>
    </div><script src="http://${staticHost}/js/layer.js"></script>

    <script type="text/javascript">
        function showMessage(msg){
            layer.open({
                content: msg
                ,btn: '关闭'
            });
        }
        function loginOut(){
            $.ajax({
                type:'post',
                url:'/edu/auth/loginOut',
                contentType:'application/x-www-form-urlencoded; charset=utf-8',
                success: function (result) {
                    showMessage("您已安全退出梦想在线教育服务系统");
                    window.location.href='/';
                }
            });
        }
    </script>
    <!-- 底部 end -->
    <script type="text/javascript">
        var checkedhw = $("#testIds").val();
        var lastHw = 0;

        $(function () {
            $("#last_q").click(function () {
                hwSuject(0);
            });
            $("#next_q").click(function () {
                hwSuject(1);
            });
            $(".open_Card").click(function(){
                $(".answer_shade").slideToggle("linear");
                $(".answer_card").slideToggle("linear");
            });
            $(".close_Card").click(function(){
                $(".answer_shade").slideToggle("linear");
                $(".answer_card").slideToggle("linear");
            });
        })

        function answerClick(answer) {
            $(answer).next(".span_answer").slideToggle("linear");
        }

        function hwSuject(type) {
            var subjectNum = $("#subjectNum").val();
            var subjectMaxNum = $("#subjectMaxNum").val();
            var hwStatus = $("#hwStatus").val();
            var exceedTerm = $("#exceedTerm").val();
            var alreadyTest = $("#alreadyTest").html().trim();
            var remainTest = $("#remainTest").html().trim();

            if (type == 0) {
                if (parseInt(subjectNum) > 1) {
                    $("#subject" + parseInt(subjectNum) + "").hide();
                    $("#subject" + (parseInt(subjectNum) - 1) + "").show();
                    $("#subjectNum").val(parseInt(subjectNum) - 1);

                    $("input[name=topic"+subjectNum+"]").removeAttr("checked");
                } else {
                    alert("已是第一题...")
                }
                $("#submit_d").hide();
            } else {

                var testType = $("#testType"+subjectNum+"").val();
                var answerIds = "";
                if (testType == 1){
                    answerIds = $("input[name=topic"+subjectNum+"]:checked").val();
                }else {
                    $(":checkbox[name=topic"+subjectNum+"]:checked").each(function () {
                        answerIds += $(this).val() + ",";
                    });
                }
                if (0 > (parseInt(subjectNum) - parseInt(subjectMaxNum))) {
                    $("#subject" + (parseInt(subjectNum) + 1) + "").show();
                    $("#subject" + parseInt(subjectNum) + "").hide();
                    $("#subjectNum").val(parseInt(subjectNum) + 1)
                    if ((parseInt(subjectNum) - parseInt(subjectMaxNum)) == -1) {
                        $("#submit_d").show();
                    }
                } else {
                    lastHw = 1;
                    alert("已是最后一题...")
                }
                if (typeof(answerIds) != "undefined" && answerIds.length > 0 && (hwStatus < 2 || exceedTerm == 1)){
                    answer(subjectNum);
                    //alert("请选择答案");
                    //return
                }
            }
        }

        function answer(optionNum) {

            var courseId = $("#courseId").val();
            var semesterId = $("#semesterId").val();
            var hwId = $("#hwId").val();
            var subjectMaxNum = $("#subjectMaxNum").val();
            var hwStId = $("#hwStId"+optionNum+"").val();
            var testId = $("#testId"+optionNum+"").val();
            var testType = $("#testType"+optionNum+"").val();
            var exceedTerm = $("#exceedTerm").val();
            var answerIds = "";

            var alreadyTestNum = parseInt($("#alreadyTest").text());

            if (testType == 1){
                answerIds = $("input[name=topic"+optionNum+"]:checked").val();
            }else {
                $(":checkbox[name=topic"+optionNum+"]:checked").each(function () {
                    answerIds += $(this).val() + ",";
                });
                answerIds = answerIds.substring(0,answerIds.length-1);
            }
            alreadyTestNum+=1;

            showLoading();
            var optionNumFlag = $("#optionNumFlag").val();
            $.ajax({
                type: 'post',
                url: '${requestHost}/hw/auth/hwDetail/do',
                contentType: 'application/x-www-form-urlencoded; charset=utf-8',
                data: {
                    courseId: courseId,
                    semesterId: semesterId,
                    hwId: hwId,
                    hwStId: hwStId,
                    testId: testId,
                    answerIds: answerIds,
                    lastHw: lastHw,
                    optionNumFlag: optionNumFlag,
                    exceedTerm: exceedTerm
                },
                success: function (result) {
                    hideLoading();
                    if (result.status == '00000000') {
                        if(checkedhw.indexOf(testId)==-1){
                            $("#alreadyTest").text(alreadyTestNum);
                            $("#remainTest").text(parseInt(subjectMaxNum) - parseInt(alreadyTestNum));
                            checkedhw+=testId+",";
                        }
                        $("#optionNumFlag").val(result.result);
                        if(exceedTerm!=1){
                            $('#hwStore').html(result.info);
                        }
                    }else {
                        alert("服务器错误");
                    }
                }
            });
        }

        function showLoading(){
            document.getElementById("over").style.display = "block";
            document.getElementById("layout").style.display = "block";
        }

        function hideLoading(){
            document.getElementById("over").style.display = "none";
            document.getElementById("layout").style.display = "none";
        }

    </script>
</body>
</html>
